<template>
  <div class="lb-moble-setting">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="mobileForm"
        :rules="mobileFormRules"
        ref="mobileForm"
        label-width="140px"
        class="mobile-form"
      >
        <el-form-item :label="tips[1]" prop="allow_create">
          <el-radio-group v-model="mobileForm.allow_create">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[2] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="创建文案" prop="create_text">
          <el-input
            v-model="mobileForm.create_text"
            placeholder="请输入创建文案"
          ></el-input>
          <lb-tool-tips>{{ tips[3] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="用户协议" prop="agreement_status">
          <el-radio-group v-model="mobileForm.agreement_status">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[4] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item
          label="协议内容"
          prop="agreement"
          v-show="mobileForm.agreement_status === 1"
        >
          <lb-ueditor
            v-model="mobileForm.agreement"
            :destroy="true"
            :ueditorType="2"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="getAndSubmitFromInfo(1)">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: {
        1: `创建${this.$t('menu.BusinessCard')}`,
        2: `是否允许小程序端创建${this.$t('menu.BusinessCard')}`,
        3: `个人中心创建${this.$t('menu.BusinessCard')}文案`,
        4: `平台用于制约用户滥用相关操作手段去干扰小程序运行，用于创建${this.$t('menu.BusinessCard')}成为员工时所签订。开启后，用户在创建${this.$t('menu.BusinessCard')}时须同意相关用户协议后再进行下一步操作`
      },
      mobileForm: {
        action: '',
        allow_create: 1,
        create_text: '',
        agreement_status: 1,
        agreement: ''
      },
      mobileFormRules: {
        // allow_create: {required: true, message: '请输入口令错误文案', trigger: 'change'},
        create_text: { required: true, type: 'string', message: '请输入创建文案', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getAndSubmitFromInfo(0)
  },
  methods: {
    /**
     * @method 回显表单信息、提交表单信息
     */
    getAndSubmitFromInfo (flag) {
      let queryForm = JSON.parse(JSON.stringify(this.mobileForm))
      queryForm.action = ''
      if (flag === 1) {
        this.$refs['mobileForm'].validate(valid => {
          if (valid) {
            if (!queryForm.agreement && queryForm.agreement_status === 1) {
              this.$message.error(`请输入协议内容`)
              return
            }
            queryForm.action = 'edit'
            this.handleAjaxForm(queryForm, flag)
          } else {
            this.$message.error(this.$t('tips.fillValidate'))
          }
        })
      } else {
        this.handleAjaxForm(queryForm, flag)
      }
    },
    handleAjaxForm (formInfo, flag) {
      this.$api.editMobile(formInfo).then(res => {
        if (res.code === 200) {
          if (flag !== 1) {
            this.mobileForm = { action: '', ...res.data }
          } else {
            this.$message.success(this.$t('tips.successSub'))
          }
        }
      })
    },
    /**
     * @method 重置表单
     */
    resetForm () {
      this.$refs['mobileForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-moble-setting {
  width: 100%;
  .page-main {
    .mobile-form {
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>
